<div nz-row>
  <div nz-col nzSpan="24">    
    <div nz-row style="margin-bottom: 20px;">
      <div nz-col nzSpan="3">标签规则：</div>
      <div nz-col nzSpan="15">
        <nz-select style="width: 200px;" nzShowSearch nzServerSearch nzPlaceHolder="规则" [nzShowArrow]="false"
                   [(ngModel)]="selectRule" [nzFilterOption]="nzFilterOption"
                   (nzOnSearch)="onRuleSerach()">
          <nz-option *ngFor="let ruleVO of ruleVOS" [nzLabel]="ruleVO.name" [nzValue]="ruleVO">
          </nz-option>
        </nz-select>
      </div>
    </div> 
    <div nz-row>
      <div nz-col nzSpan="12">
        <button nz-button nzBlock="true" nzType="primary" nzBlock (click)='onSearch()'>查询</button>
      </div>
    </div>   
  </div>
</div>
<nz-divider nzText=""></nz-divider>
<div nz-row>
  <div nz-col nzSpan="24">
    <nz-table #basicTable [nzData]="aggregateResults">
      <thead>
        <tr>
          <th style="width:15%">窗口时间</th>
          <th>指标</th>
          <th style="width:20%">标签</th>
          <th>平均值</th>
          <th>最大值</th>
          <th>最小值</th>
          <th>总和值</th>
          <th>次数</th>
          <th style="width:10%">最近值</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let aggregateResult of aggregateResults">
          <td>{{aggregateResult.startTime | date: "yyyy-MM-dd HH:mm:ss"}} - {{aggregateResult.endTime | date: "yyyy-MM-dd HH:mm:ss"}}</td>
          <td>{{aggregateResult.metric}}</td>
          <td nzBreakWord>{{aggregateResult.tag | json}}</td>
          <td>{{aggregateResult.avg}}</td>
          <td>{{aggregateResult.max}}</td>
          <td>{{aggregateResult.min}}</td>
          <td>{{aggregateResult.sum}}</td>
          <td>{{aggregateResult.count}}</td>
          <td>{{aggregateResult.latestValue}} | {{aggregateResult.latestEventTime | date: "yyyy-MM-dd HH:mm:ss"}}</td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</div>
